<template>
  <g class="prop-tip" opacity="0">
    <Text
      :content="PROP[props.propName].tip"
      :transform="`translate(${(FIELD - PROP[props.propName].tip.length * CHAR) / 2}, ${(FIELD - CHAR) / 2})`"
    />
    <animate
      attributeName="opacity"
      dur="2s"
      values="0;1;1;0"
      keyTimes="0;0.2;0.8;1"
      repeatCount="indefinite"
    />
  </g>
</template>

<script setup>
  import Text from './Text.vue'
  import { PROP, FIELD, CHAR } from '@/utils/global'

  const props = defineProps({
    propName: {
      type: String,
      default: '',
      required: true
    },
  })
</script>

<style lang="scss" scoped>

</style>